<template>
  <el-row type="flex" style="width: 100%;height: 100%">
    <dv-charts ref="chart1" :option="option1"/>
    <dv-charts ref="chart2" :option="option2"/>
    <dv-charts ref="chart3" :option="option3"/>
  </el-row>
</template>

<script>
import {currentGET} from "api";

export default {
  data() {
    return {
      option1: {
        title: {
          text: '耗电量',
          style: {
            fill: '#fff'
          }
        },
        series: [
          {
            type: 'gauge',
            data: [{name: 'itemA', value: 89, gradient: ['#751919', '#882f2f', '#da9a9a']}],
            axisLabel: {
              formatter: '{value}%'
            },
            details: {
              show: true,
              offset: [0, 60],
              formatter: '{value}'
            },
            animationCurve: 'easeOutBack',
          }
        ]
      },
      option2: {
        title: {
          text: '耗水量',
          style: {
            fill: '#fff'
          }
        },
        series: [
          {
            type: 'gauge',
            data: [{name: 'itemA', value: 89, gradient: ['#1fff1f', '#49da61', '#a3f1b0']}],
            axisLabel: {
              formatter: '{value}%'
            },
            details: {
              show: true,
              offset: [0, 60],
              formatter: '{value}'
            },
            animationCurve: 'easeOutBack'
          }
        ]
      },
      option3: {
        title: {
          text: '碳排放量',
          style: {
            fill: '#fff'
          }
        },
        series: [
          {
            type: 'gauge',
            data: [{name: 'itemA', value: 888, gradient: ['#03c2fd', '#1ed3e5', '#2fded6']}],
            axisLabel: {
              formatter: '{value}%'
            },
            details: {
              show: true,
              offset: [0, 60],
              formatter: '{value}'
            },
            animationCurve: 'easeOutBack'
          }
        ]
      }
    }
  },
  methods: {
    init() {
      currentGET('big2').then(res => {
        const data = res.data
        let totalPowerConsume = null
        let totalWaterConsume = null
        let totalCarbonEmission = null
        for (let dataKey in data) {
          totalPowerConsume += data[dataKey].totalPowerConsume
          totalWaterConsume += data[dataKey].totalWaterConsume
          totalCarbonEmission += data[dataKey].totalCarbonEmission
        }

        this.option1 = {
          ...this.option1, series: [
            {
              type: 'gauge',
              data: [{name: 'itemA', value: totalPowerConsume, gradient: ['#751919', '#882f2f', '#da9a9a']}],
              axisLabel: {
                formatter: '{value}%'
              },
              details: {
                show: true,
                offset: [0, 60],
                formatter: '{value}'
              },
              animationCurve: 'easeOutBack'
            }
          ]
        }

        this.option2 = {
          ...this.option2, series: [
            {
              type: 'gauge',
              data: [{name: 'itemA', value: totalWaterConsume, gradient: ['#1fff1f', '#49da61', '#a3f1b0']}],
              axisLabel: {
                formatter: '{value}%'
              },
              details: {
                show: true,
                offset: [0, 60],
                formatter: '{value}'
              },
              animationCurve: 'easeOutBack'
            }
          ]
        }

        this.option3 = {
          ...this.option3, series: [
            {
              type: 'gauge',
              data: [{name: 'itemA', value: totalCarbonEmission, gradient: ['#03c2fd', '#1ed3e5', '#2fded6']}],
              axisLabel: {
                formatter: '{value}%'
              },
              details: {
                show: true,
                offset: [0, 60],
                formatter: '{value}'
              },
              animationCurve: 'easeOutBack'
            }
          ]
        }
      })
    }
  },
  mounted() {
    this.init()
    setInterval(this.init, 5000)
  }
}
</script>

<style>

</style>
